<div class="container-fluid kie-container--page" data-field="container">

    <div class="row">
        <!-- breadcrumb -->
        <div class="col-xs-9 col-sm-10">
            <ol class="breadcrumb">
                <li>
                    <button class="btn-link" type="button" id="backToList">
                        <span data-i18n-key="BackToList"></span>
                    </button>
                </li>
                <li class="active">
                    <strong><span data-field="case-id"/></strong>
                </li>
            </ol>
        </div>
        <!-- refresh button -->
        <div class="col-xs-3 col-sm-2 text-right">
            <span id="refreshCaseList" data-toggle="tooltip" data-placement="left" >
              <i class="fa fa-refresh"></i><button class="btn btn-link" type="button" id="refresh"><span data-i18n-key="Refresh"></span></button>
            </span>
        </div>
    </div>

    <!-- toolbar -->
    <div class="row vertical-align row-eq-height kie-case-view-header">
        <!-- Title  -->
        <div class="col-xs-12 col-sm-5 kie-case-view-header__lhs">
            <span class="kie-case-view-header__title" data-field="case-title"></span>
            <span class="kie-case-view-header__subtitle">(</span><span
                class="kie-case-view-header__subtitle " data-field="case-owner"></span><span
                class="kie-case-view-header__subtitle ">)</span>
        </div>

        <!-- right hand side -->
        <div class="col-xs-12 col-sm-9  ">
            <div class="row kie-case-view-header__rhs">
                <!-- stages -->
                <div class="col-xs-12 col-sm-9 col-md-10 kie-case-view-header__stages" data-field="case-stages"></div>

                <!-- actions -->
                <div class="col-xs-12 col-sm-3 col-md-2 kie-case-view-header__actions">
      <span class="btn-group">
          <button type="button" class="btn btn-primary" data-field="case-close" data-i18n-key="Close"></button>


          <!-- kebab menu -->
        <div class="dropdown btn-group  dropdown-kebab-pf">
          <button class="btn btn-link dropdown-toggle" type="button" id="dropdownProjectKebab"
                  data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="true">
            <span class="fa fa-ellipsis-v"></span>
          </button>
          <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownProjectKebab"
              id="dropdownProjectKebabMenu">
            <li><a href="#" data-field="case-cancel" data-i18n-key="Cancel"></a></li>
          </ul>
        </div>
     </span>
                </div>
            </div>
        </div>
    </div>

    <!-- tabs -->
    <div class="row">
        <div class="col-xs-12">
            <!-- navigation tabs -->
            <ul class=" nav nav-tabs" id="navTabs">
                <li class="active"><a href="#" data-i18n-key="Overview"></a></li>
                <!--li><a href="#">Activity</a></li>
                <li><a href="#">Documents</a></li-->
            </ul>
        </div>
    </div>

    <!-- Page content -->
    <div class="row ">
        <div class="col-sm-12">

            <div class="cards-pf">
                <div class="container-cards-pf">
                    <div class="row row-cards-pf">

                        <!-- case details card -->
                        <div class="col-xs-12 col-sm-12 col-md-3">
                            <div class="kie-card-frame" data-field="case-details-content"></div>
                        </div>

                        <!-- task actions card -->
                        <div class="col-xs-12 col-sm-12 col-md-9 ">
                            <div class="kie-card-frame"  data-field="case-actions"></div>
                        </div>

                    </div><!-- /row -->

                    <div class="row row-cards-pf">

                        <!-- roles card -->
                        <div class="col-xs-12 col-sm-6 col-md-3 col-md-push-9">
                            <div class="kie-card-frame" data-field="case-roles"></div>
                        </div>

                        <!-- comments card -->
                        <div class="col-xs-12 col-sm-6">
                            <div class="kie-card-frame" data-field="case-comments"></div>
                        </div>


                        <!-- milestones card -->
                        <div class="col-xs-12 col-sm-6 col-md-3 col-md-pull-9">
                            <div class="kie-card-frame"  data-field="case-milestones"></div>
                        </div>


                    </div><!-- /row -->

                </div><!-- /container -->
            </div>
        </div><!-- container-fluid-->
    </div>
</div>